<template>
    <div class="vadvanced-filter">
        <div class="vadvanced-filter-turn" title="高级筛选" @click="boxshow=!boxshow">
            <span class="sicon">&#xe6d2;</span>
        </div>
        <div class="vadvanced-filter-box" v-show="boxshow">
            <p class="vaf-header">高级筛选</p>
            <span class="vaf-pramas-reset" title="重置筛选" @click="resetOption(),closePanel()"><span class="sicon">&#xe6d8;</span></span>
            <div class="vaf-body">
                <h4>飞行区等级</h4>
                <div class="vaf-checklist-box" data="fly_area_grade">
                    <span v-for="(level,lindex) in flyLevelList" class="vaf-checklist-item" @click="pickLevel(level,lindex)" v-bind:class="{'vaf-checklist-item-check' : checkData.flyLevelList.indexOf(level) > -1}">{{ level }}</span>
                    <span class="vaf-checklist-item" style="visibility: hidden;">4G</span>
                    <span class="vaf-checklist-item" style="visibility: hidden;">4G</span>
                </div>
                <h4>上一年吞吐量</h4>
                <div class="vaf-input-box" data="lastyear_person">
                    <input class="vaf-input-box-item" type="text" maxlength="9" v-model="numl" placeholder="0">
                    ~
                    <input class="vaf-input-box-item" type="text" maxlength="9" v-model="numu" placeholder="999999999">
                </div>
                <h4>机场类型</h4>
                <div class="vaf-checklist-box">
                    <span class="vaf-checklist-item" v-for="type in airportTypeLista" @click="pickType(type)" v-bind:class="{'vaf-checklist-item-check' : (checkData.airportTypeList.indexOf(type) > -1)}">{{ type }}</span>
                </div>
                <h4>补贴政策</h4>
                <div class="vaf-checklist-box" data="subsidy_type">
                    <span class="vaf-checklist-item vaf-checklist-item-big"
                          v-for="sub in subsidyType"
                          @click="pickSub(sub)" v-bind:class="{'vaf-checklist-item-check' : checkData.subsidyType.indexOf(sub) > -1}"> {{ sub }} </span>
                </div>
            </div>
            <div class="vaf-footer">
                <span class="vafbtn" @click="doSearch()"><span class="sicon">&#xe691;&nbsp;</span>查询目标机场</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                boxshow: true,
                flyLevelList: ['1A','1B','1C','2A','2B','2C','3A','3B','3C','3D','4C','4D','4E','4F'],
                numl: '',
                numu: '',
                lastYearNum: ['',''],
                airportTypeLista: ['高原机场','特殊机场','口岸机场','协调机场','非高原机场','非特殊机场','非口岸机场','非协调机场'],
                airportTypeListb: ['非高原机场','非特殊机场','非口岸机场','非协调机场'],
                subsidyType: ['有补贴','无补贴'],
                checkData:{
                    flyLevelList:[],
                    airportTypeList:[],
                    subsidyType:[]
                }
            }
        },
        methods:{
            postOption: function () {
                op = {
                    fly_area_grade:'4F,3D,4C,4D,3B',
                    lastyear_person:'',
                    airport_type:'',
                    subsidy_type:''
                }
            },
            resetOption: function () {
                this.lastYearNum = ['',''];
                this.numl = '';
                this.numu = '';
                this.checkData = {
                    flyLevelList:[],
                    airportTypeList:[],
                    subsidyType:[]
                }
            },
            sendToFather: function (data) {
                let res = [],iata = [];
                data.lists.map(item=>{
                    if(iata.indexOf(item.iata) === -1){
                        iata.push(item.iata)
                        res.push({
                            city: item.city,
                            iata: item.iata
                        })
                    }
                })
                this.$emit('sendData',res,iata);
            },
            doSearch: function () {
                let that = this,
                    opt = that.checkData,
                    _pl = Number(that.numl),
                    _pu = Number(that.numu);
                if(opt.flyLevelList.length===0 && opt.airportTypeList.length===0 && opt.subsidyType.length===0 && !(_pl + _pu >0)){
                    return alert('请选择查询条件');
                }
                if(_pl>_pu){
                    let x = that.numl;
                    that.numl = that.numu;
                    that.numu = x;
                    _pu = that.numu;
                    _pl = that.numl;
                }
                let postPerNum = (_pl + _pu) >0 ? (_pl+','+_pu): '';
                $.ajax({
                    type:'GET',
                    url : '/findFilterParamAirPort',
                    data: {
                        'fly_area_grade': opt.flyLevelList.join(','),
                        'lastyear_person': postPerNum,
                        'airport_type': opt.airportTypeList.join(','),
                        'subsidy_type': opt.subsidyType.join(',')
                    },
                    dataType : 'json',
                    success : function(data) {
                        if(data && data.lists.length){
                            that.boxshow = false;
                            return that.sendToFather(data);
                        }else{
                            alert("无匹配机场，请切换查询条件");
                            return that.resetOption();
                        }
                    },
                    error : function(err) {
                        alert("查询错误，请稍后重试");
                        console.log(err);
                    }
                })
            },
            pickLevel: function (val, index) {
                let p = this.checkData.flyLevelList.indexOf(val)
                if(p>-1){
                    this.checkData.flyLevelList.splice(p,1);
                }else{
                    this.checkData.flyLevelList.push(val);
                }
            },
            pickType: function (val) {
                let p = this.checkData.airportTypeList.indexOf(val)
                if(p>-1){
                    this.checkData.airportTypeList.splice(p,1);
                }else{
                    this.checkData.airportTypeList.push(val);
                }
            },
            pickSub: function (val) {
                let p = this.checkData.subsidyType.indexOf(val)
                if(p>-1){
                    this.checkData.subsidyType.splice(p,1);
                }else{
                    this.checkData.subsidyType.push(val);
                }
            },
            closePanel(){
                this.$emit('stateControl',true);
            },
        },
        watch: {
            numl: function(val, oval){
                this.numl = val.replace(/\D/g,'');
            },
            numu: function(val, oval){
                this.numu = val.replace(/\D/g,'');
            }
        }
    }
</script>

<style scoped>
    .sicon{
        font-family: 'icon';
    }
    /*  高級篩選   by：long   2017/9/27  */
    .vadvanced-filter{
        position: fixed;
        top:60px;
        left: 460px;
        z-index: 50;
    }
    .vadvanced-filter-turn{
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: #4455a1;
        text-align: center;
        line-height: 40px;
        color: #fff;
        box-shadow: 0 2px 10px #000;
        font-size: 23px;
        cursor: pointer;
        z-index: 1;
    }
    .vaf-pramas-reset{
        display: inline-block;
        position: absolute;
        color: #aaa;
        right: 20px;
        top: 10px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
    }
    .vaf-pramas-reset:hover{
        color: #fff;
    }
    .vadvanced-filter-box{
        position: absolute;
        top: 20px;
        left: 20px;
        width: 300px;
        overflow: hidden;
        padding-top: 10px;
        background-color: rgba(15,29,56,.9);
        transition: all .2s;
        font-size: 12px;
        box-sizing: border-box;
    }
    .vadvanced-filter-box .vaf-header{
        text-indent: 20px;
        font-size: 15px;
        color: #fff;
    }
    .vadvanced-filter-box h4{
        font-size: 12px;
        color: #fff;
        margin: 20px 0 10px 0;
    }
    .vaf-body{
        max-height:540px;
        overflow-y: auto;
        padding: 0 20px;
    }
    @media screen and (max-width:1666px){
        .vaf-body{
            max-height: 320px;
        }
    }

    .vaf-checklist-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .vaf-checklist-item{
        display: inline-block;
        width: 60px;
        height: 26px;
        margin: 0 0 9px 0;
        background-color: rgba(68,85,161,.2);
        border-radius: 3px;
        color: #748eff;
        text-align: center;
        line-height: 26px;
        cursor: pointer;
        transition: all .2s;
    }
    .vaf-checklist-item:hover{
        color: #c2cdff;
    }
    .vaf-checklist-item:active{
        background-color: #4455a1;
        color: #fff;
    }
    .vaf-checklist-item-check{
        background-color: #4455a1;
        color: #fff;
    }
    .vaf-checklist-item-big{
        width: 95px;
    }

    .vaf-input-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        color: #fff;
        line-height: 30px;
    }
    .vaf-input-box-item{
        outline: none;
        border: none;
        border: 0px solid rgba(68,85,161,0);
        border-bottom: 1px solid rgba(68,85,161,.8);
        background-color: rgba(0,0,0,0);
        color: #fff;
        width: 80px;
        height: 30px;
        text-align: center;
        box-sizing: border-box;
        transition: all .2s;
    }
    .vaf-input-box-item:focus{
        border: 1px solid #4455a1;
        box-shadow: 0px 0px 5px 0px #4455a1;
    }
    .vaf-footer{
        height: 80px;
        line-height: 80px;
        padding-right: 20px;
        text-align: right;
        color:#fff;
    }
    .vaf-footer .vafbtn{
        display: inline-block;
        width: 120px;
        height: 35px;
        border-radius: 3px;
        line-height: 35px;
        text-align: center;
        background-color: #4455a1;
        cursor: pointer;
    }
</style>
